<template>
  <div class="product-container">
    <van-dropdown-menu active-color="#1989fa">
      <van-dropdown-item title="综合" disabled />
      <van-dropdown-item
        title="价格"
        v-model="priceVal"
        :options="option1"
        @change="priceChange(priceVal)"
      />
      <van-dropdown-item
        title="分类"
        v-model="categoryVal"
        :options="filterCategory"
        @change="categoryChange(categoryVal)"
      />
    </van-dropdown-menu>
    <van-empty
      v-if="goodsList.length == 0"
      class="custom-image"
      image="search"
      description="没有找到商品"
    />

    <product :goodsList="goodsList" />
  </div>
</template>
<script>
import BScroll from "better-scroll";
import product from "@/components/product.vue";
export default {
  components: {
    product,
  },
  props: ["goodsList", "filterCategory"],
  data() {
    return {
      priceVal: 0,
      categoryVal: 1005000,
      option1: [
        { text: "价格从高到低", value: "desc" },
        { text: "价格从低到高", value: "asc" },
      ],
    };
  },
  methods: {
    //分类下拉菜单value改变时触发
    categoryChange(val) {
      this.$emit("categoryChange", val);
    },
    //价格下拉菜单value改变时触发
    priceChange(val) {
      this.$emit("priceChange", val);
    },
  },
  mounted() {
    this.filterCategory.map((item, index) => {
      if (item.checked) {
        this.categoryVal = item.value;
      }
    });
    // this.$nextTick(() => {
    //   const scroll = new BScroll(this.$refs.list, {
    //     pullUpLoad: {
    //       threshold: -30,
    //     },
    //     // scrollbar: true,
    //     // 下拉刷新
    //     pullDownRefresh: {
    //       // 下拉距离超过30px触发pullingDown事件
    //       threshold: 30,
    //       // 回弹停留在距离顶部20px的位置
    //       stop: 20,
    //     },
    //     scrollY: true,
    //     tap: true,
    //     probeType: 1,
    //   });
    //   // scroll.on("scroll", () => {
    //   //   console.log("scroll");
    //   // });
    //   scroll.on("pullingUp", () => {
    //     console.log("pullingUp");
    //   });
    //   this.$nextTick(() => {
    //     scroll.refresh(); // DOM 结构发生变化后，重新初始化BScroll
    //   });
    //   scroll.finishPullUp(); // 上拉加载动作完成后调用此方法告诉BScroll完成一次上拉动作
    // });
  },
};
</script>
<style lang="less" scoped>
.product-container {
  padding-bottom: 10px;
}
/deep/ .van-dropdown-menu {
  position: sticky;
  top: -1px;
  height: 50px;
  z-index: 99;
}
.list {
  height: 90vh;
  background-color: #efefef;
}
</style>